<template>
    <div class="tmpl">
        <!-- 1.0 分类列表 -->
        <div class="category">
            <ul class="categoryuiStyle" ref="categoryui">
                <li @click="getPhotoListByCategoryId(0)">全部</li>
                <li @click="getPhotoListByCategoryId(item.id)" v-for="item in categoryList">{{item.title}}</li>
            </ul>
        </div>

        <!-- 图片列表 -->
        <div class="imgList">
            <ul>
                <li v-for="item in photoList">
                    <router-link  v-bind='{to:"/photo/info/"+item.id}'>
                        <img v-lazy="item.img_url">
                    </router-link>
                    <p>
                        <span class="title" v-text="item.title"></span><br/>
                        {{item.zhaiyao}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<style scoped>
    /***
        分类的样式
    */
    .category{
        overflow-x: auto;
        padding: 5px;
    }

    .categoryuiStyle{
        margin: 0;
        padding: 0 5px;
        width: 1200px;
    }

    li{
        list-style: none;
        color:#0094ff;
        display: inline;
        padding: 0 5px;
    }
    /**
    * 图片列表样式
   */
    .imgList ul{
        padding: 2px;
    }

    .imgList img{
        width:100%;
        height: 400px;
    }

    image[lazy=loading] {
        width: 40px;
        height: 300px;
        margin: auto;
    }

    .imgList li{
        list-style: none;
        position: relative;
    }

    .imgList p{
        color: #fff;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.4);
    }

    .imgList .title{
        font-weight: bold;
    }
</style>

<script>
    import common from '../../tools/common.js';

    import { Indicator } from 'mint-ui';

    export default{
        data(){
            return {
                categoryList:[],
                photoList:[]
            };
        },
        created(){
            //1.获取分类的数据
            this.getPhotoCategoryListData();
            //2.获取全部
            this.getPhotoListByCategoryId(0);
        },
        methods:{
            //获取图片的分类
            getPhotoCategoryListData(){
                //1.url
                const url = common.apihost+"api/getimgcategory";

                //2.send request
                this.$http.get(url).then(res=>{
                    this.categoryList = res.body.message;
                    //计算整个分类列表的宽度,这里加上1是因为前面还有一个全部
                    const totalWidth = (res.body.message.length + 1) * 76;
                    this.$refs.categoryui.style.width = totalWidth + 'px';
                },err=>{
                    console.log(err);
                })
            },
            //根据图片分类Id去获取图片列表
            getPhotoListByCategoryId(categoryId){
                //清空
                this.photoList = [];

                Indicator.open({
                    text: '加载中...',
                    spinnerType: 'triple-bounce'
                });

                //1.url
                const url = common.apihost+"api/getimages/"+categoryId;

                //2.send request
                this.$http.get(url).then(res=>{
                    Indicator.close();
                    //console.log(res.body.message);
                    this.photoList = res.body.message;
                },err=>{
                    console.log(err);
                })
            }
        }
    }
</script>